﻿<phone:PhoneApplicationPage 
    x:Class="ThuPhap.StartPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:converter="clr-namespace:ThuPhap.Converter"
    xmlns:viewmodel="clr-namespace:ThuPhap.ViewModels"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    d:DataContext="{d:DesignInstance Type=viewmodel:StartViewModel, IsDesignTimeCreatable=True}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    toolkit:TiltEffect.IsTiltEnabled="True"
    shell:SystemTray.IsVisible="False">



    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <phone:PhoneApplicationPage.Resources>
        <converter:CenterAreaImageConverter x:Key="CenterImage"/>
        <converter:CenterAreaImageFromStreamConverter x:Key="CenterImageStream"/>
        <converter:VisibleMoreGalleryConverter x:Key="VisibleMoreButton"/>
    </phone:PhoneApplicationPage.Resources>
    <Grid x:Name="LayoutRoot">
        <controls:Panorama Name="PanoramaControl" SelectionChanged="Panorama_SelectionChanged">
            <controls:Panorama.Title>
                <TextBlock Text="Vietnamese calligraphy" FontFamily="{StaticResource Font_TMC_Ong_Do}"></TextBlock>
            </controls:Panorama.Title>
            <controls:Panorama.Background>
                <ImageBrush  ImageSource="Resources/Backgrounds/PanoramaBackground.jpg"/>
            </controls:Panorama.Background>

            <!--Panorama item one-->
            <controls:PanoramaItem Header="create">
                <ListBox Name="CreateListBox" 
                         Margin="0,0,-12,0" 
                         ItemsSource="{Binding Items}"
                         SelectionChanged="ListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                <!--Replace rectangle with image-->
                                <!--<Border Background="{StaticResource PhoneAccentBrush}" Width="102" Height="102">-->
                                <Image Width="100" Height="100" HorizontalAlignment="Center" Source="{Binding Image}"/>
                                <!--</Border>-->
                                <StackPanel Width="311">
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="templates" Orientation="Horizontal">
                <ListBox Name="TemplateListBox" Width="880" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="0,0,-12,0" ItemsSource="{Binding TemplateItems}" SelectionChanged="TemplateListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <!--<StackPanel Orientation="Horizontal" Margin="0,0,0,17">-->
                            <!--Replace rectangle with image-->
                            <Grid Margin="0,0,0,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="160"/>
                                    <RowDefinition Height="40"/>
                                </Grid.RowDefinitions>
                                <Image Grid.RowSpan="2" Grid.Row="0" Width="200" Height="200" Margin="5,0,5,0" Stretch="Uniform" Source="{Binding Bitmap}"/>
                                <Border Grid.Row="1" Height="40" Background="{StaticResource PhoneChromeBrush}" Margin="5,0,5,0" Opacity="0.5"></Border>
                                <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="{Binding Name}" TextAlignment="Left" Margin="10,0,0,0"></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel></toolkit:WrapPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </controls:PanoramaItem>

            <!--Panorama item three-->
            <controls:PanoramaItem Header="online templates" Orientation="Horizontal">
                <ListBox Name="OnlineTemplateListBox" Width="880" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="0,0,-12,0" ItemsSource="{Binding OnlineTemplates}" SelectionChanged="OnlineTemplateListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <!--<StackPanel Orientation="Horizontal" Margin="0,0,0,17">-->
                            <!--Replace rectangle with image-->
                            <Grid Margin="0,0,0,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="160"/>
                                    <RowDefinition Height="40"/>
                                </Grid.RowDefinitions>
                                <Image Grid.RowSpan="2" Grid.Row="0" Width="200" Height="200" Margin="5,0,5,0" Stretch="Uniform" Source="{Binding Bitmap}"/>
                                <Border Grid.Row="1" Height="40" Background="{StaticResource PhoneChromeBrush}" Margin="5,0,5,0" Opacity="0.5"></Border>
                                <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="{Binding Name}" TextAlignment="Left" Margin="10,0,0,0"></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel></toolkit:WrapPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </controls:PanoramaItem>

            <!--Panorama item four-->
            <controls:PanoramaItem Header="galleries">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <toolkit:PerformanceProgressBar IsIndeterminate="True" Name="GalleryProgress"></toolkit:PerformanceProgressBar>
                    <ListBox 
                    Grid.Row="0" 
                    Name="GalleryListBox" 
                    Margin="0,0,-12,0" 
                    ItemsSource="{Binding GalleryItems}" 
                    SelectionChanged="GalleryListBox_SelectionChanged"
                        >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <!--<StackPanel Orientation="Horizontal" Margin="0,0,0,17">-->
                                <!--Replace rectangle with image-->
                                <Grid Margin="0,0,0,10">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="160"/>
                                        <RowDefinition Height="40"/>
                                    </Grid.RowDefinitions>
                                    <Image Grid.RowSpan="2" Grid.Row="0" Width="200" Height="200" Margin="5,0,5,0" Stretch="Uniform" Source="{Binding Bitmap}"/>
                                    <Border Grid.Row="1" Height="40" Background="{StaticResource PhoneChromeBrush}" Margin="5,0,5,0" Opacity="0.5"></Border>
                                    <TextBlock Grid.Row="1" FontSize="19" VerticalAlignment="Center" Text="{Binding Name}" TextAlignment="Left" Margin="7,0,0,0"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel></toolkit:WrapPanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                    <!--<TextBlock Grid.Row="1" VerticalAlignment="Top" Name="AllGalleryTextBlock" Margin="5,-10,0,0" Text="all images" FontSize="30"></TextBlock>-->
                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item five-->
            <controls:PanoramaItem Header="files">
                <Grid>
                    <toolkit:PerformanceProgressBar VerticalAlignment="Center" Margin="0,-200,0,0" IsIndeterminate="True" Name="FileProgress"></toolkit:PerformanceProgressBar>
                    <toolkit:MultiselectList 
                    Name="StoredItemListBox"
                    Margin="0,0,-12,0" 
                    ItemsSource="{Binding StoredItems}" 
                    SelectionChanged="StoredItemListBox_SelectionChanged"
                    IsSelectionEnabledChanged="StoredItemListBox_IsSelectionEnabledChanged"
                    >
                        <toolkit:MultiselectList.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Tap="StackPanel_Tap" Orientation="Horizontal" Margin="0,0,0,17">
                                    <!--Replace rectangle with image-->
                                    <Image Margin="-20,0,0,0" Width="100" Height="100" Source="{Binding Image}"/>
                                    <StackPanel Width="311">
                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                        <TextBlock Text="{Binding Date}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </toolkit:MultiselectList.ItemTemplate>
                    </toolkit:MultiselectList>
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

    <!--Panorama-based applications should not show an ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar BackgroundColor="{StaticResource PhoneAccentColor}" IsVisible="False" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="appbar_select_button" 
                                            IconUri="/Resources/Images/appbar.select.rest.png" 
                                            Text="select" Click="appbar_select_button_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>